<script>
import { computed, onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { getshortvideo } from "../api/home";

export default {
    name: 'ShortVideo',
    setup() {
        const ShortVideo = reactive({
            alist: []
        });

        onMounted(() => {
            getshortvideo(10).then(res => {
                console.log('小视频', res);
                ShortVideo.alist = res.data.data.feeds;
            });
        });
        const route = useRoute();
        const videoId = computed(() => route.params.id);


        const videoUrl = computed(() => {
           

            const videoData = ShortVideo.alist.find(alist => alist.id == videoId.value);
            if (videoData) {
               
                return videoData.video.url;
            }
        })
        const videoUser = computed(() => {
           

           const videoData1 = ShortVideo.alist.find(alist => alist.id == videoId.value);
           if (videoData1) {
              
               return videoData1.title;
           }
       })
       const videoUserimg = computed(() => {
           

           const videoData1 = ShortVideo.alist.find(alist => alist.id == videoId.value);
           if (videoData1) {
              
               return videoData1.user.avatarurl;
           }
       })

        return {
            videoUrl,videoUser,videoUserimg

        };
    }
};
</script>

<template>
  
    <div class="video">
  <video :src="videoUrl" controls>
</video>
<div class="title">{{ videoUser }}</div>
<div class="userimg"><img :src="videoUserimg" alt=""></div>
    </div>
    
 
</template>

<style scoped lang="scss">
.video {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; 

  video {
    width: 100%;
    height: auto;
    max-width: 100%; 
    max-height: 100%;
    
}
.title {
  position: absolute;
  bottom: 80px; 
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px;
}
.userimg {
    position: absolute;
    right: 10px;
    img{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
    }
  }
}
</style>
